<template>
	<view>
		<comtarbar class="comtarbar">
			<template #center>
				<view class="title"><view>留言通知</view></view>
			</template>
		</comtarbar>
		<view class="content">
			<template v-for="(item, itemIndex) in getMessNotify">
				<!-- <view class="com_box" v-if="item.type=='message'" :key="index">
					<view class="box_top">
						<view class="user">{{item.nickName}}</view>
						<view class="text"></view>
					</view>
					<view class="box_middle">
						<view class="innerbox">
							<view class="m_user"  @tap="goInfo(item.fromUser)">{{getUser.name}}:</view>
							<view class="m_text">{{item.text}}</view>
						</view>
					</view>
					<view class="box_bottom">
						<view class="date">{{item.date|dateFormat}}</view>
						<view class="btn">查看详情>></view>
					</view>
					<view class="tip">
						<image v-if="!item.unRead" src="../../../static/images/dynamic/new.png" mode="widthFix"></image>
						<image v-else src="../../../static/images/dynamic/read.png" mode="widthFix"></image>
					</view>
				</view> -->
				<view class="com_box" v-if="item.type == 'message'"  :key="itemIndex">
					<view class="box_top">
						<view class="user" @tap="goInfo(item.user)">{{ item.nickName }}</view>
						<view class="text">给你留言：</view>
					</view>
					<view class="box_middle">
						<view class="innerbox">
							<view class="m_text">{{ item.content }}</view>
						</view>
					</view>
					<view class="box_bottom">
						<view class="date">{{ item.date | dateFormat }}</view>
						<view class="btn">
							<view class="delete_btn" @tap="deleteMess(item.user,item.date)">
								<image src="../../../static/images/dynamic/delete.png" mode="widthFix"></image>
							</view>
							<view class="info_btn">查看详情>></view>
						</view>
					</view>
					<view class="tip">
						<image v-if="!item.unRead" src="../../../static/images/dynamic/new.png" mode="widthFix"></image>
						<image v-else src="../../../static/images/dynamic/read.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="com_box" v-if="item.type == 'reply'"  :key="itemIndex" >
					<view class="box_top">
						<view class="user" @tap="goInfo(item.user)">{{ item.nickName }}</view>
						<view class="text">回复了你：</view>
					</view>
					<view class="box_middle">
						<view class="innerbox">
							<view class="m_text">{{ item.content }}</view>
						</view>
					</view>
					<view class="box_bottom">
						<view class="date">{{ item.date | dateFormat }}</view>
						<view class="btn">
							<view class="delete_btn"  @tap="deleteMess(item.user,item.date)">
								<image src="../../../static/images/dynamic/delete.png" mode="widthFix"></image>
							</view>
							<view class="info_btn">查看详情>></view>
						</view>
					</view>
					<view class="tip">
						<image v-if="!item.unRead" src="../../../static/images/dynamic/new.png" mode="widthFix"></image>
						<image v-else src="../../../static/images/dynamic/read.png" mode="widthFix"></image>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import request from '../../../api/request.js';
export default {
	data() {
		return {};
	},
	computed: {
		...mapGetters(['getMessNotify', 'getUser'])
	},
	beforeDestroy() {
		this.$store.dispatch('updateMessNotify');
	},
	methods: {
		// 好友详情页
		goInfo(id) {
			uni.navigateTo({
				url: '../../information/information?id=' + id
			});
		},
		// 删除动画
		deleteAnimation() {
			var animation = uni.createAnimation({
				duration: 400,
				timingFunction: 'ease'
			});
			console.log(this.index)
			animation.translateX('-100vw').step();
			animation.height('0rpx').step();
			this.animationData = animation.export();
		},
		// 删除留言通知
		deleteMess(user,date) {
			uni.showModal({
				title: '提示',
				content: '确定删除该通知？',
				success: async res => { 
					if (res.confirm) {
						let res =await this.remove(user,date)
						if(res.status){
							uni.showToast({
								title:res.msg,
								duration:1000
							})
							setTimeout(()=>{
								this.$store.commit("changeMessNotify",{user,date})
							},1000)
						}else{
							uni.showToast({
								title:res.msg,
								icon:"none",
								duration:1000
							})
						}
						
						
						// this.$emit("remove",{id,date})
					} else if (res.cancel) {
					}
				}
			});
		},
		// 后端删除留言通知表
		async remove (user,date){
			let res = await request({
				url:"/message/notify/remove",
				data:{
					token:uni.getStorageSync("token"),
					user,
					date
				},
				method:"POST"
			})
			return res[1].data
		},
		
	}
};
</script>

<style lang="scss" scoped>
@import '../../../commons/css/mycss.scss';
.comtarbar {
	background: #f4f4f4;
}
.content {
	padding: 0 40rpx;
	padding-top: 120rpx;
}
/* #ifdef APP-PLUS */
	.content{
		padding-top: 180rpx;
	}
/* #endif */
.com_box {
	box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.4);
	padding: 20rpx;
	border-radius: 10rpx;
	margin-bottom: 40rpx;
	box-sizing: border-box;
	position: relative;
	.box_top {
		display: flex;
		font-size: 32rpx;
		padding: 0rpx 20rpx;
		.user {
			color: rgb(21, 125, 181);
		}
		.text {
			padding: 0rpx 10rpx;
			color: #555555;
		}
	}
	.com_conten {
		padding: 10rpx 20rpx 0rpx 60rpx;
		font-size: 32rpx;
	}
	.box_middle {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0rpx;
		.innerbox {
			width: 90%;
			border-radius: 10rpx;
			padding: 20rpx;
			background: #f3f3f3;
			font-size: 32rpx;
			.m_user {
				color: rgb(21, 125, 181);
			}
			.m_text {
				color: #555555;
			}
		}
	}
	.box_bottom {
		display: flex;
		font-size: 30rpx;
		justify-content: space-between;
		padding: 0rpx 20rpx;
		color: #cacaca;
		.date {
		}
		.btn {
			display: flex;
			.delete_btn{
				margin-right: 30rpx;
				width: 28rpx;
				vertical-align: bottom;
				image{
					margin-top: 6rpx;
					width: 100%;
					height: auto;
				}
			}
			.info_btn{
				vertical-align: top;
			}
		}
	}
	.tip {
		position: absolute;
		top: -10rpx;
		right: -12rpx;
		image {
			width: 100rpx;
			height: 100%;
		}
	}
}
</style>
